{% extends "volunteer/layout.html" %}

{% block volunteer_content %}
<div class="dashboard-content">
    <div class="section-header">
        <h1>Dashboard</h1>
    </div>
    
    <div class="stats-grid">
        <div class="stat-card">
            <h3>Upcoming</h3>
            <p class="stat-number">{{ stats.upcoming_activities }}</p>
            <p class="stat-label">Activities</p>
        </div>
        <div class="stat-card">
            <h3>Completed</h3>
            <p class="stat-number">{{ stats.completed_activities }}</p>
            <p class="stat-label">Activities</p>
        </div>
        <!-- <div class="stat-card">
            <h3>Service Hours</h3>
            <p class="stat-number">{{ stats.total_hours }}</p>
            <p class="stat-label">Hours</p>
        </div> -->
    </div>

    <div class="section">
        <div class="section-header">
            <h2>Upcoming Activities</h2>
        </div>
        <div class="activities-list">
            {% if upcoming_activities %}
                {% for activity in upcoming_activities %}
                <div class="activity-item">
                    <div class="activity-info">
                        <h3>{{ activity.title }}</h3>
                        <p class="activity-time">
                            <i class="fas fa-calendar"></i> {{ activity.start_time.strftime('%Y-%m-%d %H:%M') }}
                        </p>
                        <p class="activity-location">
                            <i class="fas fa-map-marker-alt"></i> {{ activity.location }}
                        </p>
                        <p class="activity-org">
                            <i class="fas fa-building"></i> {{ activity.charity_name }}
                        </p>
                    </div>
                    <div class="activity-actions">
                        <a href="{{ url_for('activity_detail', activity_id=activity.id) }}" class="btn btn-primary">View Details</a>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="empty-state">
                    <i class="fas fa-calendar-day"></i>
                    <p>No upcoming activities</p>
                    <a href="{{ url_for('volunteer_activities') }}" class="btn btn-primary">Browse Activities</a>
                </div>
            {% endif %}
        </div>
    </div>

    <div class="section">
        <div class="section-header">
            <h2>Activity History</h2>
        </div>
        <div class="activities-list">
            {% if completed_activities %}
                {% for activity in completed_activities %}
                <div class="activity-item">
                    <div class="activity-info">
                        <h3>{{ activity.title }}</h3>
                        <p class="activity-time">
                            <i class="fas fa-calendar-check"></i> {{ activity.end_time.strftime('%Y-%m-%d %H:%M') }}
                        </p>
                        <p class="activity-location">
                            <i class="fas fa-map-marker-alt"></i> {{ activity.location }}
                        </p>
                        <p class="activity-org">
                            <i class="fas fa-building"></i> {{ activity.charity_name }}
                        </p>
                    </div>
                    <div class="activity-actions">
                        <a href="{{ url_for('activity_detail', activity_id=activity.id) }}" class="btn btn-secondary">View Details</a>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="empty-state">
                    <i class="fas fa-history"></i>
                    <p>No activity history</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #3498db;
    margin: 0.5rem 0;
}

.stat-label {
    color: #7f8c8d;
    font-size: 0.9rem;
}

.activities-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.activity-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.activity-info h3 {
    margin: 0 0 0.5rem 0;
    color: #2c3e50;
}

.activity-time,
.activity-location,
.activity-org {
    color: #7f8c8d;
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.activity-time i,
.activity-location i,
.activity-org i {
    width: 16px;
    margin-right: 0.5rem;
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: #7f8c8d;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #bdc3c7;
}

.empty-state p {
    margin-bottom: 1rem;
}

.btn-secondary {
    background-color: #95a5a6;
    color: white;
}

.btn-secondary:hover {
    background-color: #7f8c8d;
}
</style>
{% endblock %} 